<template>
  <div class="article-list">
    <p class="title">
      <SvgIcon name="article" class="icon" />
      文章列表
      <span class="under-line"></span>
    </p>
    <div class="article-list-item">
      <div class="left">
        <div v-slide-in class="tag-select">
          <div :class="{ 'tag-item-list': !isOpenTag, 'tag-wrap': isOpenTag }">
            <div
              class="all-tag"
              @click="
                data.page.tag = '';
                initList();
              "
            >
              <span>全部</span>
            </div>
            <div
              v-for="(item, index) in data.tagsList"
              :key="index"
              class="tags"
              :title="item.tagName"
              @click="tagSelect(item.id)"
            >
              <div class="tag-name">{{ item.tagName }}</div>
              <div class="tag-count">{{ item.count }}</div>
            </div>
          </div>
          <svg-icon
            name="down"
            :class="{ 'svg-down': !isOpenTag, 'svg-icon-up': isOpenTag }"
            @click="showTag"
          />
        </div>
        <ul class="article-ul">
          <div
            v-for="(item, index) in data.articleList"
            :key="index"
            v-slide-in
            style="height: 430px; width: 100%; margin-bottom: 20px"
          >
            <CommonArticle :detail="detail" :article="item"></CommonArticle>
          </div>
        </ul>
        <div class="page-item">
          <el-pagination
            v-model:current-page="data.page.pageNum"
            v-model:page-size="data.page.pageSize"
            background
            layout="prev, pager, next"
            :total="parseInt('' + data.page.total)"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <div class="right pc-container">
        <Myself v-slide-in></Myself>
        <Comment v-slide-in></Comment>
        <Tags v-slide-in></Tags>
        <Notice v-slide-in></Notice>
        <WebsiteInfo v-slide-in></WebsiteInfo>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import Myself from '../../../components/Myself.vue';
import Comment from '../../../components/Comment.vue';
import Tags from '../../../components/Tags.vue';
import Notice from '../../../components/Notice.vue';
import WebsiteInfo from '../../../components/WebsiteInfo.vue';
import { _getTags, _pageArticleList } from '../index.service.ts';
import { ArticleListVO, ArticlePageDTO, TagsVO } from '../index.ts';
import { useRouter } from 'vue-router';
import SvgIcon from '@/components/SvgIcon.vue';
import { useDialog } from 'crane-element';
import PasswordCheck from '@/pages/index/password/PasswordCheck.vue';

import Crypoto from '@/utils/encrypted.ts';
import CommonArticle from '@/components/CommonArticle.vue';

const cry: any = new Crypoto();

const { openDialog } = useDialog();

const router = useRouter();

const isOpenTag = ref(false);

const minWidth = 1160;

const data = reactive({
  page: {
    pageNum: 1,
    pageSize: 9,
    total: 0
  } as ArticlePageDTO,
  articleList: [
    {
      id: '',
      viewCount: 0,
      coverPathDesc: getImage('default_cover'),
      tagNames: ['欢迎'],
      title: '欢迎光临',
      content: '欢迎来到北极星博客',
      creatorAvatar: getImage('default_logo'),
      creatorName: '',
      gmtCreate: '2023-01-01 12:02:09'
    }
  ] as ArticleListVO[],
  tagsList: [] as TagsVO[],
  isPC: true
});

onMounted(() => {
  initList();
  getTopEightTags();
  handleResize();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

const initList = () => {
  _pageArticleList(data.page).then((res) => {
    data.articleList = res.data.records;
    data.page.total = res.data.total;
  });
};

function getImage(name: string) {
  const url = new URL(`../../../assets/${name}.jpeg`, import.meta.url);
  return url.pathname;
}

function handleSizeChange(e: number) {
  data.page.pageSize = e;
  initList();
}

function handleCurrentChange(e: number) {
  data.page.pageNum = e;
  initList();
}

function detail(id: string, isPassword: boolean) {
  if (isPassword) {
    openDialog({
      component: PasswordCheck,
      options: {
        destroyOnClose: true,
        width: data.isPC ? '50%' : '100%'
      },
      params: {}
    }).then((res: any) => {
      if (res) {
        router.push(
          `/article-detail/${id}+${cry.encrypt(res.password, 'crane-nb-class')}`
        );
      }
    });
  } else {
    router.push(`/article-detail/${id}`);
  }
}

function getTopEightTags() {
  _getTags().then((res) => {
    data.tagsList = res.data;
  });
}

function tagSelect(id: string) {
  data.page.tag = id;
  initList();
}

function showTag() {
  isOpenTag.value = !isOpenTag.value;
}

function handleResize() {
  data.isPC = window.innerWidth > minWidth;
}
</script>

<style scoped lang="less">
@media (max-width: 1169px) {
  /* 在宽度小于或等于 1035px 的屏幕上应用以下样式 */
  /* 在这里添加你的样式规则 */
  .pc-container {
    display: none;
  }

  .mobile-container {
    display: block;
  }

  .left {
    width: 100%;
    box-sizing: border-box;
  }

  .right {
    display: none;
  }

  .svg-down {
    width: 40px;
    height: 40px;
    color: var(--font-color);
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .svg-icon-up {
    width: 40px;
    height: 40px;
    color: var(--font-color);
    margin-right: 10px;
    cursor: pointer;
    transform: rotate(180deg);
    transition: all 0.3s ease;
  }

  .article-ul {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    justify-content: flex-start;
    align-items: center;
    margin: 20px 0 0 0;
    padding: 0;
  }
}

@media (min-width: 1170px) and (max-width: 1680px) {
  .pc-container {
    display: block;
  }

  .mobile-container {
    display: none;
  }

  .svg-down {
    width: 20px;
    height: 20px;
    color: var(--font-color);
    margin-right: 10px;
    cursor: pointer;
  }

  .left {
    flex: 1;
    box-sizing: border-box;
  }

  .right {
    width: 320px;
    margin-left: 20px;
  }

  .article-ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 20px 0 0 0;
    padding: 0;
    list-style-type: none;
    grid-gap: 20px;
  }
}

@media (min-width: 1681px) {
  /* 在宽度大于 1035px 的屏幕上应用以下样式 */
  /* 在这里添加你的样式规则 */
  .pc-container {
    display: block;
  }

  .mobile-container {
    display: none;
  }

  .left {
    flex: 1;
    box-sizing: border-box;
  }

  .right {
    width: 320px;
    margin-left: 20px;
  }

  .svg-down {
    width: 20px;
    height: 20px;
    color: var(--font-color);
    margin-right: 10px;
    cursor: pointer;
  }

  .svg-icon-up {
    width: 20px;
    height: 20px;
    color: var(--font-color);
    margin-right: 10px;
    cursor: pointer;
    transform: rotate(180deg);
    transition: all 0.3s ease;
  }

  .article-ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 20px 0 0 0;
    padding: 0;
    list-style-type: none;
    grid-gap: 20px;
  }
}

.article-list {
  width: 100%;
  margin-bottom: 100px;

  .title {
    width: 100%;
    color: var(--font-color);
    display: flex;
    align-items: center;
    font-size: 30px;
    position: relative;

    .icon {
      color: var(--font-color);
      margin-right: 5px;
      height: 30px;
      width: 30px;
    }

    .under-line {
      background: linear-gradient(
        130deg,
        rgb(36, 198, 220),
        rgb(84, 51, 255) 41.07%,
        rgb(255, 0, 153) 76.05%
      );
      width: 100px;
      height: 3px;
      position: absolute;
      top: 45px;
      left: 0;
      border-radius: 9999px;
    }
  }

  .article-list-item {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .page-item {
      width: 100%;
      margin-top: 20px;
      padding: 20px;
      box-sizing: border-box;
      background-color: var(--background-secondary);
      box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
        var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--font-color);
    }

    .tag-select {
      width: 100%;
      background-color: var(--background-secondary);
      box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
        var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--font-color);
      overflow-x: hidden;

      .tag-wrap {
        display: flex;
        flex-wrap: wrap;
        overflow-y: inherit;
      }

      .tag-item-list {
        display: flex;
        flex-wrap: wrap;
        overflow-y: hidden;
        height: 50px;
      }

      .all-tag {
        width: 80px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px 5px;
        border-radius: 5px;
        background: linear-gradient(
          130deg,
          rgb(36, 198, 220),
          rgb(84, 51, 255) 41.07%,
          rgb(255, 0, 153) 76.05%
        );

        color: #fff;
        cursor: pointer;
      }

      .tags {
        width: 100px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px 5px;
        border-radius: 5px;
        cursor: pointer;

        &:hover {
          background-color: #f1f3f9;
          opacity: 0.5;
        }

        .tag-name {
          width: 80px;
          background-color: var(--background-primary);
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
          font-size: 14px;
          padding: 9px;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .tag-count {
          background-color: var(--background-primary);
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
          font-size: 16px;
          opacity: 0.7;
          padding: 8px;
          text-align: center;
          color: var(--font-color);
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
